<template>
  <div class="article-card-wrapper">
    <div class="title">{{ article?.title }}</div>

    <div class="article-base-info clearfix">
      <img :src="authorAvatarUrl" alt="Auth" />
      <div class="info">
        <h2>{{ author.name }}</h2>
        <h3>{{ formatPublishDate }} - {{ article?.readTimes }}次阅读</h3>
      </div>
    </div>

    <div id="RTF" class="RTF" ref="RTF"></div>
  </div>
</template>

<script lang="ts" setup>
import { computed, Ref, ref, watch } from 'vue'
import { format } from '@/utils/time'
import config from '@/config'

const props = defineProps<{
  author: App.Author
  article: App.Article
}>()
const emit = defineEmits<{
  (e: 'renewIndex', value: any): void
}>()

let formatPublishDate = computed(() => {
  return format(props.article?.publishDate, 'yyyy-m-d')
})
let authorAvatarUrl = computed(() => {
  return props.author.avatar
    ? config.baseURL + props.author.avatar
    : config.baseURL + config.defaultAssetUrls.avatar
})

let RTF: Ref<any | null> = ref(null)

function showArticle() {
  let com = RTF.value as any
  com.innerHTML = props.article.content
  emit('renewIndex', com)
}

function getDom() {
  return RTF.value
}

watch(props.article, () => {
  showArticle()
})
</script>

<style lang="scss" scoped>
@import url('style/RTF.css');
@import url('style/hljs.onedark.min.css');

.article-card-wrapper {
  --w: var(--articleCardWidth);
  --fs: calc(var(--w) / 25);
  padding: 0 var(--fs);
  box-sizing: border-box;
  width: var(--w);
  background-color: white;
  min-height: 500px;
  border-radius: 2px;

  .title {
    font-size: var(--fs);
    color: var(--dark);
    font-weight: bold;
    line-height: 2;
  }

  .article-base-info {
    --a: calc(var(--w) * 0.05);
    padding-bottom: calc(var(--a) * 0.4);
    border-bottom: 1px solid var(--gray);

    img,
    .info {
      float: left;
    }

    img {
      width: var(--a);
      height: var(--a);
      border-radius: 100%;
    }

    .info {
      margin-left: calc(var(--a) * 0.3);

      h2 {
        line-height: calc(var(--a) * 0.6);
        font-size: calc(var(--a) * 0.4);
        color: var(--dark);
      }

      h3 {
        line-height: calc(var(--a) * 0.4);
        font-size: calc(var(--a) * 0.2);
        color: var(--darkGray);
      }
    }
  }

  .article-content {
    padding-top: calc(var(--fs) / 2);
    line-height: 2;
    white-space: pre-wrap;
    text-align: left;
  }

  .RTF {
    width: 100%;
    height: 100%;
  }
}
</style>
